/* RESET HTML. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
p, h2, h3, ul, li,tr, th, td{
    cursor: default;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
	font-family: Tahoma
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";

}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}
/* END RESET CSS*/

/* FONTS FACE */
@font-face {
    font-family: Ubuntu;
    src: url(../fonts/Ubuntu-Regular.ttf);
}
/*END FONTS-FACE*/

body{
    width: 100%; height: 100%;
    background: url('../images/bg.png') no-repeat fixed;
    font-family: Ubuntu;
    font-size: 15px
    position: relative
}

img#logo {
    position: absolute;
    top: 0px; left: 250px;
    width: 140px;
    background: fixed;
    z-index: 22
}

.yourself{
    float: right;
    margin: 50px 100px 0 0;
}

.yourself .name, .yourself .n-hide{
    font-size: 20px;
    color: #FFF;
    cursor: pointer
}

.yourself .name:hover, 
.yourself .n-hide:hover{
    text-decoration: underline
}

.yourself .yourPic{
    width: 70px;
    border-radius: 100px;
    margin: 0 0 10px 0;
}

#friends {
    height: 100%;
    position: absolute;
    left: -199px;
    overflow-y: visible;
    background: url('../images/black-blur.png');
    z-index: 300
}


nav#f-list{
    width: 199px;
    float: left;
    background: url('../images/black-blur.png');
    
}

#friends .fhead{
    background: url('../images/back.png');
    padding: 15px;
    color: #FFF;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #939d98
}

li.f {
    padding: 10px;
    border-bottom: 1px solid #939d98;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    position: relative
}


li.f .f-i {
    position: absolute;
    top: 0; right: -110px;
    background: #f6efef;
    padding: 10px;    
    z-index: 33333;
    border-radius: 6px;
    opacity: 0;
    display: none;
}

li.f .f-i .l-b{
    position: absolute;
    top: 3px; left: -9px;
    background: url('../images/face-icon.png') -525px -4px no-repeat;
    width: 10px; height: 16px;
    border: none;
}
li.f .f-i img{
    width: 70px;
    text-align: center;
    cursor: pointer
}

li.f .f-i .sms{
    background: url('../images/face-icon.png') -16px -100px no-repeat;
    width: 17px; height: 19px;
    border: none;
    margin: 0 0 0 10px;
    cursor: pointer
}

li.f .f-i .vc {
    background: url('../images/icon1.png') -400px 0px no-repeat;
    width: 20px; height: 13px;
    border: none;
    margin: 0px 0 0 5px;
    cursor: pointer
}
li.f .f-i .vc:hover {    
    cursor: pointer;
    background: url('../images/icon1.png') -380px -3px no-repeat;
}

li.f:hover {background: #e4eae7; color: #000} 

li.f .fimg {
    background: url('../images/face-icon.png') -682px -90px no-repeat;
    width: 7px; height: 7px;
    border: none;
    float: right;
    margin: 4px 0 0 0;
} 

.list-btn {
    float: right;
    background: url('../images/black-blur.png');
    height: 100%;
    width: 48px;
    border-left: 1px solid #f6e0e0
}   

//#friends:hover{
    -webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}

.list-btn .btn{
    background: url('../images/icon-app.png') -92px -3px no-repeat;
    width: 38px; height: 37px;
    border: none;
    position: absolute;
    right: 6px; top: 280px
}

.searchbox {
    position: absolute;
    top: 30px; left: 530px;
    background: #213269;
    border-radius: 50px;
    padding: 5px 25px
}

.searchbox .searchf {
    border: none;
    background: transparent;
    color: #FFF;
    padding: 6px;
    font-size: 15px;
    font-style: italic;
    width: 260px;
    vertical-align: middle;
    margin: 5px
}
.searchbox .searchb {
    background: url('../images/icon-app.png') no-repeat;
    background-position: 0;
    width: 36px; height: 35px;
    border: none;
    vertical-align: middle;
    cursor: pointer
}

.fa1 {
    position: absolute;
    top: 120px; right: 310px;
    color: #FFF;
    text-align: center
}
.aboutme {
    background: url('../images/nav-icon.png') no-repeat;
    background-position: -318px 0;
    width: 129px; height: 129px;
    cursor: pointer;
    border: none
}
.aboutme:hover {
    background: url('../images/nav-icon.png') no-repeat;
    background-position: -447px 0
}
.fa2 {
    position: absolute;
    top: 190px; left: 448px;
    color: #FFF;
    text-align: center
}
.chatapp {
    background: url('../images/v-icon.png') no-repeat;
    background-position: 0 0;
    width: 105px; height: 83px;
    border: none;
    cursor: pointer
}

.chatapp:hover {
    background: url('../images/v-icon.png') no-repeat;
    background-position: -105px 0
}

.banner {
    position: absolute;
    bottom: 30px; left: 260px;
    width: 910px;
}

.cleft {
    float: left;   
    width: 30px;
    background: #FFF;
    height: 260px;
    background: url('../images/black-blur.png');
    position: relative
}

.cleft .left-control{
    background: url('../images/icon-app.png') no-repeat;
    background-position: -38px 0;
    width: 26px; height: 44px;
    border: none;
    position: absolute;
    left: 2px; top: 110px
}

.a-img {
    float: left
}

.cright {
    float: left;   
    width: 30px;
    height: 260px;
    background: url('../images/black-blur.png');
    position: relative
}

.cright .right-control{
    background: url('../images/icon-app.png') no-repeat;
    background-position: -64px 0;
    width: 26px; height: 44px;
    border: none;
    position: absolute;
    left: 2px; top: 110px
}

.design {
    position: absolute;
    bottom: 10px; right: 30px;
    font-size: 18px;
    color: #FFF
}






















